import React from "react"
import { Input, Button, List } from "antd"
import "./css/animateTest.css"

const TodoListUI = props => (
  <div className="container">
    <div>
      <div className="title">Todo List</div>
      <div>
        <Input
          placeholder="todo info"
          style={{ width: "500px", marginRight: "10px" }}
          value={props.inputValue}
          onChange={props.handleInputChange}
          size='large'
        />
        <Button onClick={props.handleClick} type="primary" size='large'>
          提交
        </Button>
      </div>
      <List
        style={{ marginTop: "10px", width: "578px" }}
        bordered
        dataSource={props.list}
        size='large'
        renderItem={(item, index) => (
          <List.Item style={{ justifyContent: "space-around" }}>
            <span style={{fontSize:'20px',lineHeight:'40px'}}>{index+1}. {item}</span>
            <Button
              shape="circle"
              icon="close"
              size="large"
              onClick={() => {
                props.handleDeleteItem(index)
              }}
              type="danger"
            />
          </List.Item>
        )}
      />
    </div>
  </div>
)

export default TodoListUI
